<template>
	<view class="container">
		<!-- 商品列表功能 -->
		<view class="goods-list" v-if="goodsList.length">
			<view v-for="(item,index) in goodsList" :key="index">
				<good-card :goodItem="item"></good-card>
			</view>

			<!-- 数据是否加载完毕 -->
			<view class="finish" v-show="isFinish">数据加载完毕~~~</view>
		</view>

		<!-- 商品为空 -->
		<not-logged-in v-else
			:obj="{text:'该分类下暂无商品，去看看其他商品吧～',button:'查看其他商品',url:'/pages/category/category',toTabbar:true}"></not-logged-in>
	</view>

</template>

<script setup>
	import { reqGoodsList } from '@/api/goods.js'

	let requestData = reactive({
		page: 1,
		limit: 10,
		category1Id: '',
		category2Id: ''
	}) // 商品列表请求参数
	let goodsList = ref([]) // 商品列表
	let isFinish = ref(false) // 判断数据是否加载完毕
	let isLoading = ref(false) // 判断请求是否完毕

	// 获取商品列表数据
	const getGoodsList = async () => {
		// true ,表示正在发送中...
		isLoading.value = true

		let result = await reqGoodsList(requestData)

		// false ,表示请求已经结束
		isLoading.value = false

		goodsList.value = [...goodsList.value, ...result.data.records]
		// 若返回的数据小于每次请求的数据，说明这是最后的数据
		if (result.data.records.length < requestData.limit) {
			isFinish.value = true
		}
	}

	// 触底加载
	onReachBottom(() => {
		// 数据正在请求，不用继续请求
		if (isLoading.value) return
		// 数据请求完毕，不用继续请求
		if (isFinish.value) return
		requestData.page++
		getGoodsList()
	})

	// 下拉刷新
	onPullDownRefresh(() => {
		// 重置
		Object.assign(requestData, { ...requestData, page: 1 })
		goodsList.value = []
		isFinish.value = false
		isLoading.value = false

		// 发送新请求
		getGoodsList()

		// 停止刷新
		uni.stopPullDownRefresh()
	})

	onLoad((options) => {
		Object.assign(requestData, options)
		getGoodsList()
	})
</script>

<style lang='scss' scoped>
	.container {
		padding: 0 16rpx;
	}

	.goods-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.finish {
			height: 80rpx;
			line-height: 80rpx;
			/* display: block !important; */
			overflow: hidden;
			width: 100%;
			text-align: center;
			color: #f3514f;
			border-top: 1rpx solid #ccc;
			font-size: 28rpx;
		}
	}
</style>